<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      .btns {
          display: flex;
      }

      .btn {
          width: 100px;
          padding: 5px;
          border: 1px solid #eee;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
      }


  </style>

</head>
<body>
  <div class="app">
    <div class="current">当前坐标(<span class="position">100</span>)</div>
    <div class="current">当前速度(<span class="speed">3</span>)</div>
    <div class="btns">
      <div class="btn run">跑</div>

      <div class="btn plus">+</div>
      <div class="btn minus">-</div>
    </div>

  </div>

  <script>
    // 通过面向对象的方式(类+实例) 控制一个人跑步  速度不能小于1,所有的方法只能写在类里面

    /*
    *
    * class People{
    *   {你需要实现的代码}
    * }
    * const p = new People(3, 2)   第一个参数是起始横坐标,第二个参数是起始速度
    *
    * */


    // 知识点:
    // 1.获取dom元素
    // 2.给dom添加点击事件监听的回调函数
    // 3.类
    class People {
      x = 0
      y = 0
      speed = 0

      run() {
        this.x = this.x + this.speed
        this.updateView()
      }

      changeSpeed(flag) {
        this.speed = this.speed + (flag ? 1 : -1)
        this.speed = Math.max(1, this.speed)
        this.updateView()
      }

      updateView() {
        this.positionEl.innerText = this.x
        this.speedEl.innerText = this.speed
      }

      constructor(x, speed) {
        this.x = x
        this.speed = speed
        this.positionEl = document.querySelector(".position")
        this.speedEl = document.querySelector(".speed")

        // 给跑添加事件
        const runEl = document.querySelector(".run")
        runEl.onclick = () => {
          this.run()
        }

        // 给速度添加事件
        const plusEl = document.querySelector(".plus")
        const minusEl = document.querySelector(".minus")
        plusEl.onclick = () => {
          this.changeSpeed(true)
        }
        minusEl.onclick = () => {
          this.changeSpeed(false)
        }

        this.updateView()
      }
    }

    const b = new People(3, 2 )






  </script>
</body>
</html>
